<template>
  <div class="main">
    <div class="title">
      <p class="size" v-show="!isShow">
        请考生选择题目(请在这三个题目中选择一个作为您的考试题目):
      </p>
      <div class="random" v-show="isShow">
        <p class="size" >请考生抽三个题目:</p>
        <el-button
          class="buttonrandom"
          type="primary"
          @click="showsubject()"
          v-loading.fullscreen.lock="fullscreenLoading"
          >抽题</el-button
        >
      </div>
    </div>
    <el-row>
      <el-col v-for="(item, i) in topic" :key="i" :span="8" >
        <el-card
          shadow="hover"
          :class="{'isselect':isSelect === i}"
          v-show="show[i]"
          @click.native="change(item,i)"
        >
          <p class="content">{{ item }}</p>
        </el-card>
      </el-col>
    </el-row>
    <el-button
      class="button1"
      type="primary"
      @click="sendmessage()"
      v-show="!isShow"
      >确定</el-button
    >
  </div>
</template>

<script>
import { updateSelect } from "@/api/select";
import Vue from "vue";
export default {
  components: {
    Vue,
  },
  data() {
    return {
      topic: [{ topic: "123" }, { topic: "123" }, { topic: "123" }],
      radio: "",
      data: {
        number: "",
        topic: "",
      },
      show: [false, false, false],
      count: 0,
      isShow: true,
      fullscreenLoading: false,
      isSelect:-1
    };
  },
  created() {
    this.data.number = this.$route.params.id;
    this.topic = this.$store.state.message.topic;
  },
  methods: {
    change(title,index) {
      this.data.topic = title;
      this.isSelect = index;
      console.log(this.data);
      console.log(this.isSelect)
    },
    sendmessage() {
      if (this.data.topic === "") {
        this.$message({
          message: "请先选择考题",
          type: "warning",
        });
      } else {
        updateSelect(this.data)
          .then((res) => {
            this.$store.commit("setSelect", this.data.topic);
            this.$router.push({
              name: "correct",
              params: { id: this.data.number },
            });
          })
          .catch(() => {
            console.log("没进上面那个方法");
          });
      }
    },
    showsubject() {
      this.fullscreenLoading = true;
      this.count++;
      setTimeout(() => {
        Vue.set(this.show, this.count - 1, true);
        this.fullscreenLoading = false;
        if (this.count === 3) {
          this.isShow = !this.isShow;
        }
        if (this.count < 3) {
          this.$alert("请抽取下一个题目", "第" + this.count + "个题目", {
            confirmButtonText: "确定",
          });
        } else {
          this.$alert(
            "请考生选择三个题目中的一个作为您的考试题目",
            "题目抽取完成",
            {
              confirmButtonText: "确定",
            }
          );
        }
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin-top: 10%;
  .title {
    margin-left: 5%;
    .size {
      font-size: 35px;
      color: white;
    }
    .random {
      .size {
        font-size: 35px;
        color: white;
      }
      .buttonrandom {
        align-items: center;
        display: block;
        margin: auto;
        height: 50px;
        width: 200px;
      }
    }
  }
  .el-row {
    .el-col {
      .el-card {
        margin: 20px;
        border: 1px solid black;
        .content {
          font-size: 30px;
          text-align: center;
        }
      }
      .isselect{
        margin: 20px;
        border: 1px solid black;
        background: 	#7FDBFF!important;
         .content {
          align-items: center;
          font-size: 30px;
        }
      }
    }
  }
  .button1 {
    align-items: center;
    display: block;
    margin: auto;
    margin-top: 70px;
    height: 50px;
    width: 150px;
  }
}
</style>
